<script setup>
import {ref} from 'vue'
const isCollapse = ref(false)
const expand = () => {
  isCollapse.value = false;
}
const fold = () => {
  isCollapse.value = true
}
</script>

<template>
  <div style="width: 300px;">
    <div v-if="isCollapse">
      <el-button @click="expand"><el-icon><Expand /></el-icon></el-button>
    </div>
    <div v-else>
      <el-button @click="fold"><el-icon><Fold /></el-icon></el-button>
    </div>
    <el-menu style="height: 100vh" :collapse="isCollapse" default-active="0">
      <el-menu-item index="0">
        <el-icon><House /></el-icon>
        <template #title>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-menu-item index="1">
        <el-icon><Goods /></el-icon>
        <template #title>
          <span>商品</span>
        </template>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><ShoppingBag /></el-icon>
        <template #title>
          <span>订单</span>
        </template>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><Present /></el-icon>
        <template #title>
          <span>营销</span>
        </template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><Lock /></el-icon>
        <template #title>
          <span>权限</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style>
</style>